<template>

  <div>
    <van-nav-bar
        title="我的提醒"
        :safe-area-inset-top="true"
        @click-left="onClickLeft"
    />
    <!--搜索-->
    <van-row class="">
      <van-col span="24" >
        <van-search
            v-model="value"
            :placeholder="texts"
            @click="showPopup"
        >
        </van-search>
      </van-col>
      <van-col span="24" v-if="texts!=''"  style="padding-left: 28px" >
        <van-button type="info" size="mini"  >{{ texts }}</van-button>
        <van-icon badge="x"  style="padding-bottom: 10px" @click="qing" />
      </van-col>
    </van-row>

    <van-tabs @click="onClick" v-model="titls" >
      <div class="count-column3">
        ({{ PendingCount }})
      </div>
      <van-tab title="待处理事件" name="待处理事件">


          <van-row class="backg bottom-mt"  >
            <van-col span="24" class="backg-c event" >
<!--              <van-col span="24" class="font-14" style="text-align: center;" v-if="list.length==0">-->
<!--                {{ messs1 }}-->
<!--              </van-col>-->
              <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onClick"

              >
              <van-cell v-for="(item , index) in list" :key="index" :lable="item.label" :value="item.value" >
              <van-col span="24"  >
                <router-link  :to="{path:'/RemindDetails?eventId='+item.eventId }">
                  <van-col span="8" class="event-img">
                    <van-image class="icon-wait" width="40" height="40" :src="require('@/assets/img/icon-16.png')" />
                    <van-image width="100%" height="100"
                               v-bind:src="item.eventImage"/>
                  </van-col>
                  <van-col span="16" class="event-padding">
                    <van-col span="14" class="font-14">
                      <span class="title5">{{item.eventTitle}}</span>
                    </van-col>
                    <van-col span="10" class="font-12 font-fu">
                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-20.png')" /> 剩余<span class="font-color">{{ Number(item.pengTime/60/60).toFixed(0)}}</span>小时
                    </van-col>
                    <van-col span="24" class="font-12" v-if="item.eventTypeName!=null">
                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-06.png')" /> {{item.eventTypeName}}
                    </van-col>
                    <van-col span="24" class="font-12">
                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-18.png')" /> {{item.cameraName}}
                    </van-col>
                    <van-col span="24" class="font-12">
                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-19.png')" />{{item.reportTime}}
                    </van-col>
                  </van-col>
                </router-link>

              </van-col>
              </van-cell>
              </van-list>
            </van-col>

          </van-row>



      </van-tab>

      <div class="count-column1">
        ({{ OverdueCount }})
      </div>
      <van-tab title="已逾期事件" name="已逾期事件">

        <van-row class="backg bottom-mt">

          <van-col span="24" class="backg-c event">
<!--            <van-col span="24" class="font-14" style="text-align: center;"  v-if="overlist.length==0">-->
<!--              {{ messs2 }}-->
<!--            </van-col>-->
            <van-list
                v-model="loading1"
                :finished="finished1"
                finished-text="没有更多了"
                @load="onClick"
            >
              <van-cell  v-for="(item , index) in overlist" :key="index" :lable="item.label" :value="item.value" >
              <van-col span="24"  >
                <router-link  :to="{path:'/RemindDetails?eventId='+item.eventId}">
                  <van-col span="8" class="event-img">
                    <van-image class="icon-wait" width="40" height="40" :src="require('@/assets/img/icon-23.png')" />
                    <van-image width="100%" height="100" v-bind:src="item.eventImage"/>
                  </van-col>
                  <van-col span="16" class="event-padding">
                    <van-col span="14" class="font-14">
                      <span class="title5">{{item.eventTitle}}</span>
                    </van-col>
                    <van-col span="10" class="font-12 font-fu">
                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-20.png')" /> 逾期<span class="font-color-red">{{ item.overTime%60 }}</span>分钟
                    </van-col>
                    <van-col span="24" class="font-12"  v-if="item.eventTypeName!=null">
                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-06.png')" /> {{item.eventTypeName}}
                    </van-col>
                    <van-col span="24" class="font-12">
                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-18.png')" /> {{item.cameraName}}
                    </van-col>
                    <van-col span="24" class="font-12">
                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-19.png')" />{{item.reportTime}}
                    </van-col>
                  </van-col>
                </router-link>

              </van-col>
              </van-cell>
            </van-list>

          </van-col>

        </van-row>

      </van-tab>

      <div class="count-column2">
        ({{ Completedcount }})
      </div>
      <van-tab title="已完成事件" name="已完成事件">

        <van-row class="backg bottom-mt">

          <van-col span="24" class="backg-c event">

            <van-list
                v-model="loading2"
                :finished="finished2"
                finished-text="没有更多了"
                @load="onClick"
                @check="chudi"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
            >
              <van-cell v-for="(item , index) in complist" :key="index" :lable="item.label" :value="item.value" >
              <van-col span="24">
                <router-link  :to="{path:'/Event?eventId='+item.eventId+'&Intdex='+3+'&wang='+'wanceng' }">
                  <van-col span="8" class="event-img">
                    <van-image width="100%" height="110"
                               v-bind:src="item.eventImage"/>
                  </van-col>
                  <van-col span="16" class="event-padding">
                    <van-col span="24" class="font-14">
                      <spanok class="title5">{{item.eventTitle}}</spanok>
                    </van-col>
                    <van-col span="10" class="font-12 font-fu">
<!--                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-20.png')" />-->
                    </van-col>
                    <van-col span="24" class="font-12" v-if="item.eventTypeName!=null">
                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-06.png')" /> {{item.eventTypeName}}
                    </van-col>
                    <van-col span="24" class="font-12">
                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-18.png')" /> {{item.cameraName}}
                    </van-col>
                    <van-col span="24" class="font-12">
                      <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-19.png')" />{{item.reportTime}}
                    </van-col>
                  </van-col>
                </router-link>
              </van-col>
              </van-cell>
            </van-list>

          </van-col>

        </van-row>

      </van-tab>


    </van-tabs>
    <van-popup v-model="show" position="top" :style="{ height: '50%' ,paddingTop:'10%'}" >

      <van-row class="title">
        <router-link to="/Remind">
          <van-image class="title-return" width="30" height="30" :src="require('@/assets/img/icon-return.png')" />
        </router-link>
        <van-col span="24" ><form action="#/Remind" style="background-color: #1989FA">
          <van-search
              v-model="value"
              show-action
              :placeholder="texts"
              @search="onSearch"
              @cancel="onCancel"
              @click="showPopup"
          >
            <template #action>
              <van-button @click="onClick('sou',titls,texts)" type="info" size="small" style="font-size: 15px;margin-top: -10px">搜索</van-button>
            </template>
          </van-search>
        </form>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="24" class="font-14">
          公共管理
        </van-col>
        <van-col class="font-12 search-btn">
          <van-button type="info" size="mini" @click="sousu('垃圾堆积')">垃圾堆积</van-button>
          <van-button type="info" size="mini" @click="sousu('出店经营')">出店经营</van-button>
          <van-button type="info" size="mini" @click="sousu('游商摊贩')">游商摊贩</van-button>
          <van-button type="info" size="mini" @click="sousu('沿街晾晒')">沿街晾晒</van-button>
          <van-button type="info" size="mini" @click="sousu('人员聚集')">人员聚集</van-button>
          <van-button type="info" size="mini" @click="sousu('机动车违停')">机动车违停</van-button>
          <van-button type="info" size="mini" @click="sousu('非机动车违停')">非机动车违停</van-button>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="24" class="font-14">
          平安建设
        </van-col>
        <van-col class="font-12 search-btn">
          <van-button type="info" size="mini" @click="sousu('消控室离岗')">消控室离岗</van-button>
          <van-button type="info" size="mini" @click="sousu('消防通道违规占用')">消防通道违规占用</van-button>
          <van-button type="info" size="mini" @click="sousu('电动车飞线')">电动车飞线</van-button>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="24" class="font-14">
          其他
        </van-col>
        <van-col class="font-12 search-btn">
          <van-button type="info" size="mini" @click="sousu('护学岗未就位')">护学岗未就位</van-button>
          <van-button type="info" size="mini" @click="sousu('保安未就位')">保安未就位</van-button>
          <van-button type="info" size="mini" @click="sousu('校门违规占用')">校门违规占用</van-button>
        </van-col>
      </van-row>

    </van-popup>
    <Nav />
  </div>

</template>

<script>
import Nav from "@/components/Nav.vue";
import {Toast} from "vant";
export default {
  data() {
    return {
      value:'',
      show: false,
      loading: false,
      finished: false,
      loading1: false,
      finished1: false,
      loading2: false,
      finished2: false,
      pageNum:1,
      pageNum1:1,
      pageNum2:1,
      titls:"待处理事件",
      texts:'',
      time1:0,
      messs1:'',
      messs2:'',
      messs3:'',
      textss:'',
      Completedcount:sessionStorage.getItem("Completedcount"),
      OverdueCount:sessionStorage.getItem("OverdueCount"),
      PendingCount:sessionStorage.getItem("PendingCount"),
      list:[],
      error:false,
      overlist:[],
      complist:[],
    };
  },
  created() {
        this.Completedcount=sessionStorage.getItem("Completedcount"),
        this.OverdueCount=sessionStorage.getItem("OverdueCount"),
        this.PendingCount=sessionStorage.getItem("PendingCount"),
    this.titls=this.$route.query.title;
    this.texts=this.$route.query.uu;
    this.textss=this.$route.query.uu;
    if (this.$route.query.title==null){
      this.onClick("",  "待处理事件", this.texts);
    }else {
      this.onClick("",  this.titls, this.texts);
    }

    console.log("传值类型:=>"+this.texts);



  },
  methods: {
    qing(){
       this.texts='';
       this.value='';
       this.onClick("",this.titls);
    },
    showPopup() {
      this.show = true;
    },
    onSearch() {
      this.show = false;
      // Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
    onClickLeft(){
      this.$router.go(-1);
    },
    cu(){

    },
    chudi(){
      console.log("我到底了")
    },
    sousu(texts){
      console.log("搜索类型:=>"+texts);
      this.texts=texts;
      this.show = false;
      this.onClick("",this.titls);
    },
    onClick(name, title,uu) {

      if (sessionStorage.getItem("Completedcount")==null){
        this.Completedcount=0;
      }
      if (sessionStorage.getItem("OverdueCount")==null){
        this.OverdueCount=0;
      }
      if (sessionStorage.getItem("PendingCount")==null){
        this.PendingCount=0;
      }
      // 加载状态结束
      var userid=localStorage.getItem("userId");
      if (uu==null){
        uu="";
      }
      if (this.texts==null){
       this.texts=uu;
      }
      if (this.value!=''){
        this.texts=this.value;
      }
      if (title=="待处理事件"){
           this.titls="待处理事件";
        this.$http.post("http://139.224.226.216:8083/appEventInfo/selectOneHkevent?userId="+userid+"&eventAlertStatus=3&eventTitle="+this.texts+"&pageNum="+this.pageNum+"&pageSize=99999")
            .then(res=>{
              console.log(res);

              if (res.data.data != null){
                 this.list=res.data.data.appHkeventList;
                 this.PendingCount=this.list.length;
                // 加载状态结束
                this.loading = false;
                this.finished=true;
                 console.log("loding的值=》"+this.loading);
                 //时间
              }else{
                this.list=[];
                this.PendingCount=0;
                this.messs1="无数据";
              }

              if (this.list.length==0){
                console.log("loding的值=》"+this.loading);
                this.loading = false;
                this.finished=true;
              }

              // if (this.finished){
              //    this.pageNum+=1;
              // }
              //
            })
        //     .catch(function (){
        //       this.error = true;
        // });

      }

      if (title=="已逾期事件"){
        this.titls="已逾期事件";
        this.$http.post("http://139.224.226.216:8083/appEventInfo/selectOneHkevent?userId="+userid+"&eventAlertStatus=9&eventTitle="+this.texts+"&pageNum="+this.pageNum1+"&pageSize=99999")
            .then(res=>{
              console.log(res);
              if (res.data.data != null){
                this.overlist=res.data.data.appHkeventList;
                this.OverdueCount=this.overlist.length;
                this.loading1 = false;
                this.finished1=true;
                console.log("loding的值=》"+this.loading);
              }else{
                this.overlist=[];
                this.OverdueCount=0;
                this.messs2="无数据";
                this.loading1 = false;
                this.finished1=true;
              }

            })
        //     .catch(function (){
        //      this.error = true;
        // });
        if (this.overlist.length==0){
          console.log("loding的值=》"+this.loading);
          this.loading1 = false;
          this.finished1=true;
        }

        // if (this.finished1){
        //   this.pageNum1+=1;
        //
        // }
      }
       if (title=="已完成事件"){
        this.titls="已完成事件";
        this.$http.post("http://139.224.226.216:8083/appEventInfo/selectOneHkevent?userId="+userid+"&eventAlertStatus=6&eventTitle="+this.texts+"&pageNum="+this.pageNum2+"&pageSize=99999")
            .then(res=>{
              if (res.data.data != null){
                this.complist=res.data.data.appHkeventList;
                this.Completedcount=this.complist.length;
                this.loading2 = false;
                this.finished2=true;
                console.log("loding的值=》"+this.loading);
              }else{
                this.complist=[];
                this.Completedcount=0;
                this.messs3="无数据";
                this.loading2 = false;
                this.finished2=true;

              }
              console.log("已完成事件的值=>");
              console.log( this.complist);

            })
            // .catch(function (){
            //   this.error = true;
            // });
        if (this.complist.length==0){
          console.log("loding的值=》"+this.loading);
          this.loading2 = false;
          this.finished2=true;
           } 
        // if (this.complist.length>=20){
        //   this.pageNum2+=1;
        // }
      }

      if (name=="sou"){
        this.onSearch();
      }
    },
  },
  components:{
    Nav
  },

};
</script>

<style scoped>

.count-column3 {
  position: absolute;
  left: 98px;
  top: 12px;
  background-size: 100% 100%;
  width: 0.53333rem;
  height: 0.56rem;
  text-align: center;
  line-height: 0.53333rem;
  font-size: 0.26667rem;
}
.count-column1{
  position: absolute;
  left: 222px;
  top: 12px;
  background-size: 100% 100%;
  width: 0.53333rem;
  height: 0.56rem;
  text-align: center;
  line-height: 0.53333rem;
  font-size: 0.26667rem;
}

.count-column2{
  position: absolute;
  left: 347px;
  top: 12px;
  background-size: 100% 100%;
  width: 0.53333rem;
  height: 0.56rem;
  text-align: center;
  line-height: 0.53333rem;
  font-size: 0.26667rem;
}
/*.title5{*/
/*  white-space: nowrap;*/
/*  overflow: hidden;*/
/*  -o-text-overflow: ellipsis;*/
/*  text-overflow: ellipsis;*/
/*}*/

</style>